使用unplugin

#使用unplugin| 来源: 网络整理| 查看: 265

最近，在使用VScode开发Vue项目时，遇到引入组件首字母大小写修改导致terminal报错的问题，错误如下所示：

Module not found: Error: [CaseSensitivePathsPlugin] `/Users/xxx/src/components/ListItem/richList.vue` does not match the corresponding path on disk `RichList.vue`.

在项目启动状态，以新建组件RichList.vue为例。

假设我们的原计划是创建组件RichList.vue，但是不小心创建为richList.vue，在页面中引richList组件，如下：

在components.d.ts会自动生成一条引入，如下：

import '@vue/runtime-core' export {} declare module '@vue/runtime-core' { export interface GlobalComponents { RichList: typeof import('./src/components/ListItem/richList.vue')['default'] } }

此时，我们发现程序正常运行，当发现组件名称不符合命名规范，将组件名字改为RichList.vue后，在terminal中看到下图中的报错，提示引入组件的路径不对。

此时再次打开components.d.ts文件，发现RichList组件的import的路径并没有改变，依旧是首字母小写时候的路径，尝试直接删除components.d.ts引用，或者将./src/components/ListItem/richList.vue修改为./src/components/ListItem/RichList.vue，发现自动引入中的路径更新后还是会生成./src/components/ListItem/richList.vue，terminal依旧报错，经过试验，总结了两种解决上述报错的方案。

方法一：

组件名称增加新的单词变成新的组件名，此方法不仅是新建的组件适用，已经提交到git中的组件同样适用。

例如新组建名称TestRichList，引入组件：

components.d.ts将重新生成正确的引入，报错消失。

import '@vue/runtime-core' export {} declare module '@vue/runtime-core' { export interface GlobalComponents { TRichList: typeof import('./src/components/ListItem/TRichList.vue')['default'] } }

方法二：

不重新起名，仅修改大小写。此方法适用从未提交到git上的组件，已提交到git上的组件将不会生效（采用方法一）。

组件名字从richList.vue改为RichList.vue，重启服务，报错消失，且components.d.ts更新成正确的引用。

import '@vue/runtime-core' export {} declare module '@vue/runtime-core' { export interface GlobalComponents { RichList: typeof import('./src/components/ListItem/RichList.vue')['default'] } }

【本文地址】

公司简介

联系我们